import React, {PureComponent} from 'react';
import {StyleSheet,View,Image,Text,TouchableOpacity,Dimensions} from 'react-native';
import Color from '../../widget/Color';
import NavItem from '../../widget/NavItem';
import * as api from "../../api";
import HomeMenuView from './HomeMenuView';
import HomeGridItem from './HomeGridItem';
import screen from '../../common/screen';

type Props = {

}

type State ={
    discounts: Array<Object>,
}

class HomeScene extends PureComponent<Props, State> {

    static navigationOptions = () => ({
       headerStyle:{backgroundColor:Color.primary},
        headerTitle:(
            <TouchableOpacity style={styles.searchBar}>
                <Image source={require('../../img/home/search_icon.png')} style={styles.searchIcon}/>
                <Text style={{fontSize:14}}>搜索</Text>
            </TouchableOpacity>
        ),
        headerLeft:(
            <NavItem
                title='定位'
                titleStytle={{color:'white'}}
                onPress={() => {
            }}/>
        ),
        headerRight:(
            <NavItem
                icon={require('../../img/home/icon_homepage_map_old.png')}
                onPress={() => {

                }}
            />
        )
    })

    constructor(props:Object){
        super(props)

        this.state = {
            discounts:[],
        }
    }

    componentDidMount(){
        this.requstData()
    }

    requstData = async() => {
        try {
            let reaponse = await  fetch(api.discount)
            let json = await reaponse.json()
            this.setState({discounts:json.data})
            alert('test' + JSON.stringify(json.data))
        }catch (error) {
            alert(('error' + error))
        }
    }

    render(){
        return(
            <View style={{flex:1}}>
                <HomeMenuView
                    menuInfos={api.menuInfos}
                    onMenuSelected={(index) =>{
                        alert('test' + index)
                    }}
                />

                <View style={{height:14,backgroundColor:Color.paper}} />

                <View style={styles.gridContainer}>
                    <HomeGridItem/>
                    <HomeGridItem/>
                    <HomeGridItem/>
                    <HomeGridItem/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    searchBar:{
        flexDirection:'row',
        width:screen.width * 0.7,
        height:30,
        borderRadius:19,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'white',

    },

    searchIcon:{
        width:20,
        height:20,
        margin:5,
    },

    gridContainer:{
        flexDirection:'row',
        flexWrap:'wrap',
        borderTopWidth:StyleSheet.hairlineWidth,
        borderLeftWidth:StyleSheet.hairlineWidth,
        borderColor:Color.border,
    }
})

export default HomeScene